<template>
  <div class="_wz_cent_main _wz_uploadSeal">
    <row :gutter="16">
      <i-col span="12">
        <Form ref="deptInfoData" label-position="right" :label-width="120">
          <FormItem label="上传印章" prop="noticeContent">
            <Upload :before-upload="signatureImgFileFun" action="" style="color: #2d8cf0;cursor: pointer;">
              <Button icon="ios-cloud-upload-outline">上传印章</Button>
            </Upload>
            <div></div>
            <div style="width: 300px;height: 300px;">
              <vueCropper
                ref="cropper"
                :img="option.img"
                :outputSize="option.size"
                :outputType="option.outputType"
                :info="true"
                :full="option.full"
                :canMove="option.canMove"
                :canMoveBox="option.canMoveBox"
                :fixedBox="option.fixedBox"
                :original="option.original"
                :autoCrop="option.autoCrop"
                :autoCropWidth="option.autoCropWidth"
                :autoCropHeight="option.autoCropHeight"
                :centerBox="option.centerBox"
                :high="option.high"
                :infoTrue="option.infoTrue"
                :enlarge="option.enlarge"
              ></vueCropper>
            </div>
          </FormItem>
        </Form>
      </i-col>
      <i-col span="12">
        <div style="color: #ed4014;">印章上传裁剪中，上下左右四个方向尽量贴边裁剪，不留边距。</div>
        <div style="height: 320px;display: flex;justify-content: center;align-items: center;flex-direction: column;">
          <img src="../../assets/yinzhang.png" style="width: 250px;height: 250px;"/>
          <div style="line-height: 30px;color: #ed4014;">图例</div>
        </div>
      </i-col>
    </row>

    <div class="demo-drawer-footer" style="z-index: 3;">
      <Button style="margin-right: 8px" @click="$emit('closeFun', false)">取消</Button>
      <Button type="primary" @click="addSubmit">提交</Button>
    </div>
  </div>
</template>
<script>
export default {
  props:['selectData'],//接收来自父组件的数据
  data() {
    return {
      option: {
        img: '', // 裁剪图片的地址
        info: true, // 裁剪框的大小信息
        outputSize: 0.8, // 裁剪生成图片的质量
        outputType: 'png', // 裁剪生成图片的格式
        canScale: true, // 图片是否允许滚轮缩放
        autoCrop: true, // 是否默认生成截图框
        // autoCropWidth: 148, // 默认生成截图框宽度
        // autoCropHeight: 148, // 默认生成截图框高度
        fixedBox: false, // 固定截图框大小 不允许改变
        fixed: true, // 是否开启截图框宽高固定比例
        fixedNumber: [7, 5], // 截图框的宽高比例
        full: true, // 是否输出原图比例的截图
        canMoveBox: true, // 截图框能否拖动
        original: false, // 上传图片按照原始比例渲染
        centerBox: false, // 截图框是否被限制在图片里面
        infoTrue: true // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
      },
    }
  },
  computed: {//计算属性

  },
  beforeCreate() {//beforeCreate创建前状态

  },
  created() {//created创建完毕状态

  },
  beforeMount() {//beforeMount挂载前状态   DOM 元素然后塞入页面的过程

  },
  mounted() {//mounted 挂载结束状态
    let that = this;
    if(!!that.selectData.signatureImg){
      that.option.img = that.apiUrl.imgUrl + that.selectData.signatureImg;
    }

  },
  methods: {//执行的方法
    signatureImgFileFun(file) {//营业执照图片
      let that = this;
      let type = file.type.split("/")[0];
      if (type == "image") {//图片
        // 上传成功后将图片地址赋值给裁剪框显示图片
        that.$nextTick(() => {
          that.option.img = window.URL.createObjectURL(file)
        })
      } else {
        that.$Message.warning('请选择jpg、png、jpeg的图片进行上传');
      }
      return false;
    },
    addSubmit(){
      let that = this;
      that.$refs.cropper.getCropBlob((findData) => {

          that.$Spin.show();
          let data = JSON.parse(JSON.stringify(that.selectData));

          let formData = new FormData()
          for (let key in data) {
            formData.append(key, data[key])
          }
          if(!!findData) {
            formData.append('signatureImgFile', findData)
          }
          that.axios.post(that.apiUrl.coreDeptContractCoreDeptContractSaveOrUpdate,formData, {headers: {'Content-Type': "application/x-www-form-urlencoded"}}).then(res => {
            that.$Spin.hide();
            if (!!res) {
              that.$Message.success("保存成功");
              that.$emit("closeFun", true)
            }
          }).catch(err => {
            console.log('失败', err);
          })
      })
    },

  },
  watch: {//监听

  },
  beforeUpdate() {//beforeUpdate 更新前状态

  },
  updated() {//updated 更新完成状态

  },
  beforeDestroy() {//beforeDestroy 销毁前状态

  },
  destroyed() {//destroyed 销毁完成状态

  }
}
</script>
<style lang="less">
._wz_uploadSeal{
  padding: 0 0 30px 0;

  // 截图
  .cropper-content {
    .cropper {
      width: auto;
      height: 300px;
    }
  }
}
</style>
